<template>
  <div>
    <div style="margin-bottom: 30px;display: flex;justify-content: center;align-items: center">
      <el-input placeholder="通过书名或编号搜索..." prefix-icon="el-icon-search" size="small"
        style="width: 400px;margin-right: 10px" v-model="keywords">
      </el-input>
      <el-button size="small" type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>
    </div>
    <el-row style="height: 840px;">
      <!--<search-bar></search-bar>-->
      <el-tooltip effect="dark" placement="right" v-for="item in goods" :key="item.id">
        <el-card style="width: 135px;margin-bottom: 20px;height: 233px;float: left;margin-right: 15px" class="book"
          bodyStyle="padding:10px" shadow="hover">
          <router-link :to="{path:'/goodsDetail',query:{id:item.id}}">
            <div class="cover">
              <img :src="item.photo" alt="图片">
            </div>
          </router-link>
          <div class="info">
            <div class="title">
              <a href="">{{item.goodsName}}</a>
            </div>
          </div>
          <div class="author">{{item.price}}¥</div>
        </el-card>
      </el-tooltip>
    </el-row>
    <el-row>
      <el-pagination :current-page="1" :page-size="10" :total="20">
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: 'Goods',
    data() {
      return {
        goods: [],
        keywords: '',
      }
    },
    mounted: function() {
      this.loadGoods()
    },
    methods: {
      loadGoods() {
        this.$axios.get('/getListGoods').then(resp => {
          this.goods = resp.data
        })
      },
      searchClick() {
        this.$axios.post('/searchGoods', {
          goodsName: this.keywords
        }).then(resp => {
          this.goods = resp.data
        })
      }
    }
  }
</script>

<style scoped>
  .cover {
    width: 115px;
    height: 172px;
    margin-bottom: 7px;
    overflow: hidden;
    cursor: pointer;
  }

  img {
    width: 115px;
    height: 172px;
    /*margin: 0 auto;*/
  }

  .title {
    font-size: 14px;
    text-align: left;
  }

  .author {
    color: #333;
    width: 102px;
    font-size: 13px;
    margin-bottom: 6px;
    text-align: left;
  }

  .abstract {
    display: block;
    line-height: 17px;
  }

  a {
    text-decoration: none;
  }

  a:link,
  a:visited,
  a:focus {
    color: #3377aa;
  }
</style>
